<template>
  <view v-if="productList && productList.length > 0" class="h-subsidy" :style="[componentStyle]">
    <view class="_title-subsidy">
      <view class="_title" :style="{'color': componentStyle.titleColor,'font-size': componentStyle.titleFontSize,'font-weight': componentStyle.titleFontWeight,'text-align': componentStyle.textAlign}">{{detail.componentTitle || ''}}</view>
      <view style="display: flex;align-items: center" v-if="showMore" @click="onMore(detail.id)">
        <text class="_more" :style="{'color': moreColor}">查看更多</text>
        <x-icon name="icon-017" size="22" :color="moreColor"/>
      </view>
    </view>
    <view class="h-subsidy-content">
      <scroll-view class="imageContainer _list" scroll-x="true">
        <view v-for="(item,index) in productList" :key="index" class="_item" @click="handleClick(item)">
          <view
            class="_goods-detail"
            :style="{'border-radius': componentStyle.borderRadius}"
          >
            <view class="_goods-img">
              <view v-if="item.subsidyAmount" class="_tips" :style="{'backgroundColor':componentStyle.labelBackground}">补{{item.subsidyAmount}}</view>
              <view class="_img">
                <x-image :src="formatOss(item.productMainPic)" />
              </view>
            </view>
            <view class="_goods-title">
              <view :class="{'_goods-_indent1': true}">{{ item.productTitle }}</view>
              <view :class="{'_goods-price': true}">
                <text class="_price-tip">¥</text>
                <text class="_blod">{{ item.subsidyPrice }}</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import XImage from '@/components/x-image';
import XIcon from '@/components/x-icon';
import navigateTo from '@/utils/x-navigate';
import formatStyle from '@/utils/x-format-style';
export default {
  name: 'HSubsidyList',
  components: {
    XIcon,
    XImage
  },
  props: {
    detail: {
      type: Object,
      default: () => ({
        componentContentList: []
      })
    },
    sourcePageType: { // 埋点用
      type: [String, Object],
      default: '1'
    },
    sourcePageId: { // 埋点用源页面Id
      type: [String, Object],
      default: ''
    },
    source: {
      type: [String, Object],
      default: ''
    },
    groupsSource: {
      type: [String, null],
      default: ''
    }
  },
  data() {
    return {
      componentStyle: {},
      productList: []
    };
  },
  computed: {
    showMore() {
      return this.detail?.componentStyle.more.show || false;
    },
    moreColor() {
      return this.detail?.componentStyle.more.color || '#999999';
    }
  },
  mounted() {
    this.handleComponentStyle();
    this.getGoodsList();
  },
  methods: {
    handleClick(item) {
      item.linkType = 2;
      item.linkContent = item.productId;
      navigateTo(item, {
        sourcePageType: this.sourcePageType,
        sourcePageId: this.sourcePageId,
        source: this.source,
        groupsSource: this.groupsSource
      });
      this.$XTrack('onListToDetailEvent', {
        componentId: this.detail.id,
        productId: item.productId
      });
    },
    // 格式化图片
    formatOss(url) {
      return this.$tools.formatOss(url, 200);
    },
    onMore(id) {
      uni.navigateTo({
        url: `/packages/activity/subsidy/list?componentId=${this.detail.id}`
      });
      this.$XTrack('onSubsidyGoodsMore', {
        componentId: this.detail.id
      });
    },
    handleComponentStyle() {
      const { borderRadius, backgroundColor, backgroundImage, titleColor, labelType, titleFontSize, titleFontWeight, textAlign } = this.detail?.componentStyle;
      this.componentStyle = {
        ...formatStyle(this.detail?.componentStyle, ['marginBottom', 'padding', 'backgroundColor']),
        titleFontSize: titleFontSize * 2 + 'rpx',
        titleFontWeight: titleFontWeight,
        backgroundColor: backgroundColor,
        backgroundImage: `url(${backgroundImage})`,
        borderRadius: borderRadius === 1 ? '10rpx' : 0,
        titleColor: titleColor,
        textAlign: textAlign,
        labelBackground: labelType === 1 ? '#DE3A2E' : '#3a3939'
      };
    },
    // 获取首页补贴价商品数据
    getGoodsList() {
      this.$http({
        url: '/product/app/component/product',
        data: {
          componentId: this.detail.id,
          pageNum: 1,
          pageSize: 10
        }
      }).then(res => {
        this.productList = res.data ? res.data : [];
      }).catch(() => {
      });
    }
  }
};
</script>

<style lang="scss">
.h-subsidy{
  width: 702px;
  height: 400px;
  margin: 0px auto;
  padding: 0px 16px;
  z-index: 9;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  ._title-subsidy{
    display: flex;
    height: 102px;
    align-items: center;
    ._title{
      flex: 1;
      font-size: 32px;
      font-weight: bold;
      color: $uni-color-default;
    }
  }
  ._more{
    font-size: 26px;
    color: $uni-color-info;
  }
  .coupon-list{
    margin-bottom: 16px;
  }
  ._title{
    flex: 1;
    font-size: 28px;
    font-weight: bold;
    color: $uni-color-default;
  }
  .h-subsidy-content{
    .imageContainer{
      width: 100%;
      position: relative;
      white-space: nowrap;
      ._item{
        display: inline-flex;
        justify-content: center;
        margin-right: 16px;
      }
      ._goods-detail {
        display: inline-block;
        box-sizing: border-box;
        width: 190px;
        min-height: 246px;
        border-radius: 10px;
        overflow: hidden;
        background: #FFFFFF;
        ._goods-img {
          flex-shrink: 0;
          position: relative;
          width: 190px;
          height: 190px;
          background: #FFE4E4;
          overflow: hidden;
          ._tips{
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 2px 8px;
            backdrop-filter: blur(4px);
            border-radius: 4px;
            font-size: 26px;
            color: #F8EBE5;
          }
          ._img{
            width: 100%;
            height: 190px;
          }
        }
        ._goods-title{
          height: 96px;
          padding: 10px 0;
          ._goods-_indent1{
            width: 100%;
            padding: 0 6px;
            color: #323233;
            font-size: 28px;
            -webkit-line-clamp: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
          }
          ._goods-price{
            color: $uni-color-primary;
            text-align: center;
            font-size: 30px;
          }
          ._price-tip{
            font-size: 26px;
          }
        }
      }
    }
  }
}
</style>
